<template>
  <view class="">
    <view class="sc" @click="scFn">
      <u-icon name="star" size="24" color="#fff" v-if="!isSc"></u-icon>
      <u-icon name="star-fill" size="24" v-else color="#5CCBC1"></u-icon>
    </view>
    <view class="video">
      <view @click="videoPlay" v-if="!replayUrl" style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
        <image src="" style="height: 100%; width: 100%" mode="aspectFill" />
        <view class="iconBox">
          <u-icon name="play-circle" size="70" color="#fff"></u-icon>
        </view>
      </view>
      <video v-else :show-play-btn="true" :show-fullscreen-btn="true" autoplay :src="replayUrl" style="height: 100%; width: 100%"></video>
    </view>
    <view class="xjBox">
      <view class="tit">南京国家农创中心助推广袤田野孕育新希望</view>
      <view class="gk">400+已观看</view>
      <view class="xjList">
        <view class="xj" v-for="(item, index) in 10" :key="index">{{ item }}</view>
      </view>
    </view>
    <view class="xjBox">
      <view>图文详情</view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from "vue";
const isSc = ref(false);

const replayUrl = ref("");
const videoPlay = async () => {
  replayUrl.value = "1231";
};
const scFn = () => {
  isSc.value = !isSc.value;
};
</script>
<style lang="less" scoped>
.video {
  width: 100%;
  height: 750rpx;
  background: #fbbe7f;
}
.iconBox {
  position: absolute;
}
.xjBox {
  padding: 32rpx;
  background: #fff;
  margin-bottom: 20rpx;
  .tit {
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 16rpx;
  }
  .gk {
    font-size: 24rpx;
    color: #8a8a8d;
  }
  .xjList {
    display: flex;
    align-items: center;
    gap: 6rpx;
    overflow-x: auto;
    margin-top: 48rpx;
    .xj {
      flex-shrink: 0;
      background: #f3f4f6;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      width: 82rpx;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
    }
  }
}
.sc {
  position: absolute;
  top: -62rpx;
  right: 32rpx;
  width: 60rpx;
  height: 60rpx;
  background: rgba(176, 176, 176, 0.5);
  z-index: 9999;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
